<template>
  <div class="index-contener">
    <!-- banner and time -->
    <Banner state='join'/>
    <!-- join function -->
    <div class="join-box">
        <img src="../assets/img/tit_cyfs.png" alt="" class="title">
        <Model>
          <Title>参与投稿</Title>
          <div class="publish-baseinfo">
              在APP内，发布带<span>#拍视频 拿大奖#</span>话题视频，<br>
              视频内容需与<span>越野</span>或<span>新年祝福</span>相关。<br>
              投稿时间：1月17日～2月8日<br>
          </div>
          <div class="btn" @click="gotoJoin()">
              <div class="btn-con">
                  <img src="../assets/img/video.png" alt="" srcset="" class="video">
                  <span>立即投稿</span>
              </div>
              <img src="../assets/img/btn_tip.png" alt="" srcset="" class="btn-tip">
          </div>
        </Model>
        <Model class="view-model">
          <Title>参与互动</Title>
           <div class="publish-baseinfo">
              在APP内或小程序内，查看话题<span>#拍视频 拿大奖#</span>下视频，为喜爱的视频<span>点赞、评论、收藏和转发</span>，加人气！
          </div>
          <div class="btn" @click="gotoView()">
              <div class="btn-con">
                  <span>立即查看</span>
              </div>
          </div>
        </Model>
    </div>
    <!--活动奖励 -->
    <Reward></Reward>
    <!-- 底部 -->
    <footer class="footer">本活动解释权归越野侠所有</footer>
    <shade
      :clienttype="clienttype"
      v-show="shadeState"
      @clickhandle="shadeHandle"
    ></shade>
  </div>
</template>

<script>
import { getParams, isIOS, isAndroid, isWeixin } from "../assets/utils/util";
import shade from "../components/shade";
import Banner from "../components/banner";
import Model from "../components/model";
import Title from "../components/title";
import Reward from "../components/reward";
import { shareInit } from "../assets/models/wechat";
import api from "../assets/models/api";
let oApi = new api();
export default {
  components: {
    shade,
    Banner,
    Model,
    Title,
    Reward
  },
  data() {
    return {
      topicID: 32,
      uid: "",
      from: "h5",
      isIOS: "",
      isAndroid: "",
      isWeixin: "",
      type: {
        join: "4",
        view: "5"
      },
      clienttype: "",
      shadeState: false
    };
  },
  mounted: function() {
    this.init();
  },
  methods: {
    //初始化项目参数
    init() {
      const { userid, from } = getParams();
      userid && (this.uid = userid);
      from && (this.from = from);
      this.isWeixin = isWeixin();
      this.isIOS = isIOS();
      this.isAndroid = isAndroid();
      this.clienttype = isIOS() ? "ios" : "android";
      this.topicID = oApi.getActiveInfo()['topicID'];
      this.topicName = oApi.getActiveInfo()['topicName'];
      shareInit({
        title:"拍视频 拿大奖",
        desc:"拍个视频投稿参与活动，就有机会获得万元大奖",
        img:"https://xiakexing-images.oss-cn-hangzhou.aliyuncs.com/logo/icon_yueyexia.png"
      });
    },
    //立即参与
    gotoJoin() {
      _czc.push(["_trackEvent","海选","按钮","立即参与","1","join"]);
      const {userid} = getParams();
      this.uid = userid;
      if (this.from == "app") {
        if (this.uid > 0) {
          if (this.isIOS) {
            window.webkit.messageHandlers.vote.postMessage({
              type: this.type["join"],
              id: this.topicID,
              name: this.topicName
            });
          } else if (this.isAndroid) {
            vote.vote(this.type.join*1, this.topicID, this.topicName);
          }
        } else {
          if (this.isAndroid) {
            login.login("nologin");
          }
          if (this.isIOS) {
            window.webkit.messageHandlers.login.postMessage({
              msg: "nologin"
            });
          }
        }
      } else if (this.from == "wechat") {
        if (this.uid > 0) {
          wx.miniProgram.navigateTo({
            url: `/publishPackage/pages/publicVideo/publishTravel?topicID=${this.topicID}`
          });
        } else {
          wx.miniProgram.navigateTo({
            url: "/userPackage/pages/user/bindNum/bindNum"
          });
        }
      } else {
        if (this.isWeixin) {
          this.shadeState = true;
          return false;
        }
        this.$router.push('/download');
      }
    },
    //立即查看
    gotoView() {
      _czc.push(["_trackEvent","海选","按钮","立即查看","1","look"]);
      if (this.from == "app") {
        if (this.isIOS) {
          window.webkit.messageHandlers.vote.postMessage({
            type: this.type["view"],
            id: this.topicID, 
            name: ''
          });
        } else if (this.isAndroid) {
          vote.vote(this.type.view*1, this.topicID,'');
        }
      } else if (this.from == "wechat") {
        wx.miniProgram.navigateTo({
          url: `/topicPackage/topicDetail/topicDetail?id=${this.topicID}`
        });
      } else {
        if (this.isWeixin) {
          this.shadeState = true;
          return false;
        }
        this.$router.push('/download');
      }
    },
    // 切换阴影层的状态
    shadeHandle() {
      this.shadeState = !this.shadeState;
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '../assets/css/animate.css';
.index-contener
  background $theme-color
  .join-box
      box-sizing border-box
      padding 0 20px
      margin-bottom 35px
      .title
          display block
          width 222px
          margin 0 auto
      .publish-baseinfo
          font-size 14px
          line-height 24px
          color #FFEBD7
          span 
              color #FFD95F
      .btn
          width 100%
          height 64px
          background url('../assets/img/botton_bg.png') no-repeat
          background-size 100%
          position relative
          color #B90028
          font-size 16px
          margin-top 15px
          .btn-con
            position absolute
            top 0
            left 0
            width 100%
            height 82%
            display flex
            align-items center
            justify-content center
            .video
              display block
              width 26px
              height 16px
              margin-right 6px
          .btn-tip
            display block
            width 95px
            position absolute
            top -5px
            right 8px
            animation Shake 5s linear infinite
      .view-model
        margin-top 40px
    .footer 
        color #980424
        padding 24px 0
        text-align center
        font-size 12px
</style>
